<template>
  <view>
    <!-- 搜索框 -->
    <view class="search-box">
      <uni-search-bar @confirm="enterHandler" v-model="searchInput" focus :radius="100" cancelButton="none"
        @input="searchInputHandler" @clear="clearInputHandler">
      </uni-search-bar>
    </view>
    <!-- 搜索列表 -->
    <view class="sugg-list">
      <view class="sugg-item" v-for="(item,i) in searchList" :key="i" @click="gotoDetail(item)">
        <view class="goods-name">
          {{item.goods_name}}
        </view>
        <uni-icons type="forward"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view v-if="searchList.length===0 && historyList.length!==0" class="history-box">
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons @click="clearHistoryList" type="trash"></uni-icons>
      </view>
      <view class="history-body">
        <uni-tag @click="clickTagHandler(item)" v-for="(item,i) in historyList" :key="i" :text="item"></uni-tag>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        timer: null,
        searchInput: '',
        searchList: [],
        historyList: []
      };
    },
    onLoad() {
      // 从本地取出历史记录
      this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')
    },
    methods: {
      async getSearchList() {
        if (this.searchInput === '') return this.clearInputHandler()
        const { data: res } = await this.$axios.get('/goods/qsearch', {
          params: {
            query: this.searchInput
          }
        })
        if (res.meta.status !== 200) return uni.$showMsg()
        this.searchList = res.message
        if (this.searchList.length === 0) uni.showToast({
          title: '暂时没有搜到~',
          icon: "none"
        })

      },
      searchInputHandler() {
        this.searchInput = this.searchInput.trim()
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.getSearchList()
        }, 500)
      },
      // 清空搜索框
      clearInputHandler() {
        this.searchList = []
      },
      // 跳转商品详情
      gotoDetail(item) {
        uni.navigateTo({
          url: "/subpkg/goods_detail/goods_detail?goods_id=" + item.goods_id
        })
      },
      // 标签点击事件
      clickTagHandler(val) {
        this.searchInput = val
      },
      // 添加新标签
      addTag() {
        this.historyList.some((item, idx) => {
          if (this.searchInput === item) {
            this.historyList.splice(idx, 1)
            return
          }
        })
        this.historyList.unshift(this.searchInput)
        // 存入历史记录
        uni.setStorageSync('kw', JSON.stringify(this.historyList))
      },
      clearHistoryList() {
        this.historyList = []
        uni.setStorageSync('kw', '[]')
      },
      // 回车事件
      enterHandler() {
        this.searchInput = this.searchInput.trim()

        if (this.searchInput === '') return
        this.addTag()
        uni.navigateTo({
          url: "/subpkg/goods_list/goods_list?query=" + this.searchInput
        })
      }
    }
  }
</script>

<style lang="scss">
  .seach-box {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .uni-searchbar {
    background-color: #c00000;
  }

  .sugg-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26rpx 0;
    margin: 0 15rpx;
    border-bottom: 1px solid #eee;

    .goods-name {
      // 溢出隐藏
      overflow: hidden;
      // 溢出显示...
      text-overflow: ellipsis;
      // 不许换行
      white-space: nowrap;
      font-size: 24rpx;
      margin-right: 6rpx;
    }
  }

  .history-box {
    .history-title {
      display: flex;
      justify-content: space-between;
      height: 80rpx;
      align-items: center;
      padding: 0 10rpx;
      font-size: 30rpx;
      border-bottom: 1px solid #eee;
    }

    .history-body {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 20rpx;

      .uni-tag {
        border: 0;
        color: black;
        background-color: #efefef;
        margin: 20rpx 0rpx 20rpx 10rpx;
        font-size: 28rpx;
      }
    }
  }
</style>
